<template>
  <div>

    <div  v-if="warning" @mouseover="showTdStyle = true" @mouseleave="showTdStyle = false">
      <a-select show-search option-filter-prop="children" v-model="myValue.key" :filter-option="filterOption" @change="setValue" :disabled="disabled" style="width: 100%" class="remind" :allowClear="myValue!=''&&typeof myValue!='undefined'">
        <a-select-option v-for="iteam in options" :key="iteam.key" :data="iteam">{{iteam.label}}</a-select-option>
      </a-select>
      <div class="td_model" v-if="warning&&showTdStyle">
        <div class="title">校验提示</div>
          <p class="pt10" v-for="(iteam,index) in errMsg" :key="index">{{index+1}}.{{iteam}}</p>
      </div>
    </div>
     <!-- @blur="setValue" @pressEnter="setValue" -->
    <a-select v-else show-search option-filter-prop="children" v-model="myValue.key" :filter-option="filterOption" @change="setValue" :disabled="disabled" style="width: 100%" class="notremind" :allowClear="myValue!=''&&typeof myValue!='undefined'">
      <a-select-option v-for="iteam in options" :key="iteam.key" :data="iteam">{{iteam.label}}</a-select-option>
    </a-select>
  </div>
</template>

<script>
/* eslint-disable */
    export default {
      // name:
      data() {
        return {
          myValue:this.value,
          showTdStyle:false
        }
      },
      methods: {
        filterOption(input, option) {
          return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
          );
        },
        isObjEmpty(str){
          if(str == null || str == ""){
            return true;
          }
        },
        setValue(value,option){
            this.myValue=option.data.attrs.data
          this.$emit('input', this.myValue);
        },
      },
      props:{
        options:{// 选项内容
          type:Array,
          default: function(){
            return [];
          },
        },
        errMsg:{// 错误提示信息
          type:Array,
          default:function(){
            return [];
          },
        },
        value:{// 数字框默认值
          type:Object,
          default:{},
        },
        disabled:{// 是否禁用
          type: Boolean,
          default:false
        }
      },
      computed:{
        warning(){
          if(this.errMsg == ''){
            return false;
          }
          return true;
        },
      },
      watch:{
        value(newVal) {
          this.myValue = newVal;
        },
        myValue(newVal) {
          this.$emit('input', newVal)
        },
      },
    }
</script>

<style scoped>
  .remind{
    border:2px solid #FF0000;
  }
  /deep/.ant-select-disabled .ant-select-selection{
    background: rgb(235, 235, 235);
    color: rgba(0, 0, 0, 0.5);
  }
  .td_model{
    position: fixed;
    right: 20px;
    top:20px;
    width: 400px;
    padding: 10px;
    box-shadow:  0 0 15px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    background: #ffffff;
    z-index: 10;
  }
  .td_model .title{
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #eee;
  }
  .pt10{
    padding-top: 10px;
  }

</style>